<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>佳艺达后台管理系统</title>
<link rel="stylesheet" type="text/css" href="resources/css/index.css"/>
<script type="text/javascript" src="/static/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/jquery/plugins/jquery.blockUI-2.7.js"></script>
<script type="text/javascript" src="/static/jquery/plugins/jquery.jrumble-1.3.min.js"></script>
<script type="text/javascript" src="/static/commons/admin.js"></script>
<script type="text/javascript">
var rumbleElement = '.content';

$(function(){
	$('#uid').attr('placeholder', '用户名');
	$('#uid').blur(function(){
		if($(this).val() == ''){
			$(this).attr('placeholder', '用户名');
		}
	});
	
	$('#uid').focus(function(){
		if($(this).val() == ''){
			$(this).attr('placeholder', '');
		}
	});

	$('#pwd2').hide();
	$('#pwd1').focus(function(){
		$(this).toggle();
		$('#pwd2').toggle();
		$('#pwd2').focus();
	});
	
	$('#pwd2').blur(function(){
		if($('#pwd2').val() == ''){
			$(this).toggle();
			$('#pwd1').toggle();
		}
	});
	
	$('#pwd2').keydown(function(e){
		if (e.keyCode == 13){
			login();
		}
	});

	$(rumbleElement).jrumble({
		x: 5,
		y: 0,
		rotation: 0
	});
});

function login(){
	$('#error').text('');
	
	var form = new Object();
	form.name = $('#uid').val();
	form.password = $('#pwd2').val();
	
	if($('#uid').val().trim() == ''){
		$('#error').text('请输入用户名');
		return;
	}
	if($('#pwd2').val().trim() == ''){
		$('#error').text('请输入密码');
		return;
	}
	
	//console.log(form);
	blockUI('正在登录...');
	$.ajax({
		type : "post",
		url : 'login.json',
		data : form,
		success : function(data) {
			unblockUI(200);
			
			if(data.code == 0){
				window.location.href = 'main.jspx';
			}else{
				$('#error').text('用户名或密码错误');
				$(rumbleElement).trigger('startRumble');
				setTimeout(function(){$(rumbleElement).trigger('stopRumble')}, 500);
			}
		},
		error: function(){
			unblockUI();
			$('#error').text('网络错误');
		}
	});
}
</script>
</head>

<body>
<div class="bg">
<div class="content">
  <div id="error" class="wrong"></div>
  <input id="uid" class="user" type="text">
  <input id="pwd1" class="password" type="text" placeholder="密码">
  <input id="pwd2" class="password" type="password">
  <div class="loginBtn" onclick="login();"></div>
</div>
</div>
</body>
</html>
